<template>
  <div class="zhiboxiaoshou_fabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <div class="tabs_container">
            <div
              @click="tabCilck('one')"
              :class="activeName === 'one' ? 'tabs_style' : ''"
              style="margin-left:20px;width:160px;height:52px;text-align:center;line-height:52px"
            >首页设置</div>
            <div
              @click="tabCilck('two')"
              :class="activeName === 'two' ? 'tabs_style' : ''"
              style="margin-left:30px;width:160px;height:52px;text-align:center;line-height:52px"
            >下单成功页设置</div>
            <div
              @click="tabCilck('three')"
              :class="activeName === 'three' ? 'tabs_style' : ''"
              style="margin-left:30px;width:160px;height:52px;text-align:center;line-height:52px"
            >联系客服设置</div>
            <div
              @click="tabCilck('four')"
              :class="activeName === 'four' ? 'tabs_style' : ''"
              style="margin-left:30px;width:160px;height:52px;text-align:center;line-height:52px"
            >分享店铺海报</div>
          </div>
          <div class="flex background_style" v-show="activeName === 'three'">
            <div class="fleft">
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">联系电话:</div>
                <div class="r">
                  <el-input v-model="all.mobile" placeholder="请输入联系电话"></el-input>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">联系客服:</div>
                <div class="r">
                  <el-input v-model="all.contact" placeholder="请输入企业微信客服链接"></el-input>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">微信二维码:</div>
                <div class="r">
                  <chuantu
                    ref="chuantu"
                    @getimg="getimg"
                    :imgs="all.qrcode"
                    v-if="relo"
                    style="background:white;"
                  ></chuantu>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">其他联系信息:</div>
                <div class="r">
                  <el-input v-model="all.other_contact" maxlength="100" placeholder="请输入其他联系信息"></el-input>
                </div>
              </div>
              <div style="height: 100px;" class="flexcc" v-show="activeName === 'three'">
                <el-button
                  @click="(e)=>xiayibu('four')"
                  style="width:160px;height:48px;border-radius: 12px;background:#005AFF;border:none;color:white"
                >保存并下一步</el-button>
              </div>
            </div>
            <div class="fright">
              <div class="shouji">
                <div class="qrcode_wechat">
                  <div class="shouji_img flexcc" v-if="!all.qrcode" style="margin-top:80px">二维码</div>
                  <div class="shouji_img" v-if="all.qrcode" style="margin-top:80px">
                  <img :src="all.qrcode" />

                </div>
                   <!-- <div style="font-size:12px;color:#666">微信客服1对1服务</div>
                  <div style="font-size:12px;color:#666">长按或扫描二维码，添加客服微信</div> -->
                </div>
                <div class="shouji_qita" style="font-size: 12px; color:#999;">
                <div style="color:black;font-size:16px;margin-bottom:20px">其他联系信息</div>
                  <span>{{all.other_contact}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex background_style" v-show="activeName === 'two'">
            <div class="fleft">
              <!-- <div class="ft" style="font-size: 16px;">下单成功页设置</div> -->
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">下单成功话术</div>
                <div class="r">
                  <el-input v-model="all.order_info" maxlength="100" placeholder="请输入下单成功话术"></el-input>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">二维码展示</div>
                <div class="r">
                  <chuantu
                    ref="chuantu2"
                    @getimg="getimg2"
                    :imgs="all.order_pic"
                    v-if="relo"
                    style="background:white"
                  ></chuantu>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">二维码说明</div>
                <div class="r">
                  <el-input v-model="all.order_pic_info" maxlength="100" placeholder="请输入二维码说明"></el-input>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">客服联系电话</div>
                <div class="r">
                  <el-input v-model="all.order_contact" placeholder="请输入客服联系电话"></el-input>
                </div>
              </div>
              <div style="height: 100px;" class="flexcc" v-show="activeName === 'two'">
                <el-button
                  @click="xiayibu('three')"
                  style="width:160px;height:48px;border-radius: 12px;background:#005AFF;border:none;color:white"
                >保存并下一步</el-button>
              </div>
            </div>
            <div class="fright">
              <div class="shoujim">
                <!-- <div style="background: #fff; border-radius:5px 5px 0 0;">
                  <img src="../../static/img/nav.png" style="width: 100%; margin:0px auto;" />
                </div>-->
                <div style="background: #fff; border-radius:5px 5px 0 0;">
                  <img
                    src="../../static/img/xd_success.png"
                    style="width: 110px; margin:0px auto; padding:20px 0;"
                  />
                </div>
                <div
                  style="text-align: center;background: #fff;  font-weight: bold;  padding:0 0 20px 0; font-size: 14px;"
                  v-if="all.order_info"
                >{{all.order_info}}</div>
                <div
                  style="text-align: center;background: #fff;  font-weight: bold;  padding:0 0 20px 0; font-size: 14px;"
                  v-if="!all.order_info"
                >下单成功</div>
                <div
                  style="text-align: center;background: #fff;  padding:0 0 20px 0;  border-radius:0 0 5px 5px ;"
                >
                  <el-button
                    round
                    style="background: #FF0639;height:40px;width:240px;color:white;border:0;"
                  >查看订单</el-button>
                </div>
                <div style="background: #fff; border-radius:5px 5px 0 0;" v-if="all.order_pic">
                  <img :src="all.order_pic" style="width: 150px; margin:0px auto; padding:20px 0;" />
                </div>
                <div
                  style="background: #fff; border-radius:5px 5px 0 0;"
                  class="flexcc"
                  v-if="!all.order_pic"
                >
                  <div
                    class="shouji_img flexcc"
                    style="width: 115px; height:115px;  border-radius:5px; margin: 20px 0; border:1px #ddd dashed;"
                    v-if="!all.order_pic"
                  >二维码</div>
                </div>
                <div
                  style="text-align: center; padding-bottom:10px; background: #fff; font-size: 12px;"
                  v-if="all.order_pic_info"
                >{{all.order_pic_info}}</div>
                <div
                  style="text-align: center; padding-bottom:10px; background: #fff; font-size: 12px;"
                  v-if="!all.order_pic_info"
                >二维码说明</div>
                <div
                  v-if="all.order_contact"
                  style="text-align: center; font-size: 12px; padding-bottom:20px; background: #fff; border-radius:0 0 5px 5px ;"
                >客服联系电话:{{all.order_contact}}</div>
                <div
                  v-if="!all.order_contact"
                  style="text-align: center; font-size: 12px; padding-bottom:20px; background: #fff; border-radius:0 0 5px 5px ;"
                >
                  客服联系电话:
                  <span style="color:#999">155xxxxxxxx</span>
                </div>
              </div>
              <!-- <div class="shouji2">
                  <div class="shouji_img flexcc" v-if="!all.order_pic">二维码</div>
                  <div class="shouji_img" v-if="all.order_pic"><img :src="all.order_pic"></div>
              </div>-->
            </div>
          </div>

          <div class="flex background_style" v-show="activeName === 'four'">
            <div class="fleft" style="width:500px">
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">选择图片</div>
                <div class="r">
                  <chuantu
                    ref="chuantu222"
                    @getimg="gethaibaoImg"
                    :imgs="haibaoImg"
                    v-if="relo2"
                    style="background:white;"
                  ></chuantu>
                </div>
                <div class="note_explain">
                  <div style="font-size:14px;color:#999;margin-top:10px">最佳尺寸:750*750</div>
                  <div style="font-size:14px;color:#F72C6A;margin-top:10px">注意:底部230px不要有任何图片和文字</div>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;margin-top: 50px;">
                <div class="z">编辑文字</div>
                <div class="r">
                  <el-input
                    v-model="content"
                    placeholder="请输入店铺简介"
                    maxlength="15"
                    show-word-limit
                    style="width:283px"
                  ></el-input>
                </div>
              </div>
              <div class="flexc color_select" style="margin-bottom: 20px;margin-top: 50px;">
                <div class="r" style="display:flex">
                  <div class="z">文字颜色</div>
                  <div style="width:400px;display:flex;gap:8px;flex-wrap: wrap;">
                    <div
                      :style="{background:item,width:'20px',height:'20px', cursor: 'pointer',borderRadius:'5px'}"
                      v-for="item in colorData"
                      :key="item"
                      @click="colorValue=item"
                    >
                      <img v-if="colorValue==item" :src="require('../../static/img/gouxuan.png')" />
                    </div>
                  </div>
                </div>
              </div>
              <div style="height: 100px;" class="flexcc" v-show="activeName === 'four'">
                <el-button
                  @click="(e)=>fourClick()"
                  style="width:160px;height:48px;border-radius: 12px;background:#005AFF;border:none;color:white;margin-left:-100px;margin-top:50px"
                >保存</el-button>
              </div>
            </div>
            <div class="fright">
              <div class="phone_container">
                <div style="background:#F8F9FD;width:100%;height:100%">
                  <img src="../../static/img/poster_img.png" />
                  <div class="shouji_img flexcc" v-if="!haibaoImg">海报图片</div>
                  <div class="shouji_img" v-if="haibaoImg">
                    <img :src="haibaoImg" />
                  </div>
                  <div class="shop_detail" style=" position: relative;">
                    <div class="shop_detail_item">
                      <span
                        :style="{color:colorValue}"
                        style="font-size:14px;margin-top:20px;"
                      >{{content}}</span>
                      <span
                        style="font-size:14px; position: absolute;left:10px;top:70px"
                      >{{all.user_name}}的小店</span>
                      <div
                        style="color:#AFB3BC;font-size:10px;position: absolute;left:10px;top:100px"
                      >长按识别二维码进入下单链接</div>
                    </div>
                    <div style="width:50%;">
                      <div class="qrcode" ref="qrCodeUrl" style="margin-top:20px;margin-left:20px;"></div>
                    </div>
                  </div>
                  <div class="instore_copy">
                    <div class="instore">保存图片</div>
                    <div class="copy">复制链接</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <zhibofabu :hide="true" v-show="activeName === 'one'" @tabCilck="tabCilck" />
        </div>
      </div>
    </div>
    <el-dialog
      title="根据已有直播页发布页面"
      :visible.sync="log"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="700px"
    >
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
          <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import zhibofabu from "./zhiboxiaoshou_fabu2.vue";
import top from "./components/top.vue";
import left from "./components/left.vue";
import chuantu from "../components/chuantu.vue";
import * as qiniu from "qiniu-js";
import QRCode from "qrcodejs2";

export default {
  components: {
    top,
    left,
    chuantu,
    zhibofabu
  },
  name: "zhiboxiaoshou_fabu",
  data() {
    return {
      activeName: "one",
      list: "",
      tongbuall: "",
      log: false,
      input: "",
      all: {
        title: "", //	wq店铺	是	string	无
        mobile: "", //	18056565656	是	string	电话
        contact: "", //	18056565656	是	string	联系方式
        qrcode: "", //	二维码	是	string	二维码
        order_info: "下单成功", //	下单返回话术	是	string	下单返回话术
        order_pic: "", //	3	是	string	下单返回图片
        order_pic_info: "", //	desc	是	string	下单返回图片描述
        account_id: 0, //	0	是	string	无
        other_contact: "", //0	是	string	其他联系方式
        order_contact: "", //	是	string	下单后联系方式
        store_source: "" //来源
      },
      all2: {
        qrcode: ""
      },
      relo: true,
      colorValue: "#FF0808",
      list: [],
      haibaoImg: "",
      content: "",
      relo2: true,
      colorData: [
        "#FF0808",
        "#FF5508",
        "#FFA108",
        "#BAD800",
        "#4BD800",
        "#01C83F",
        "#01C1C8",
        "#009EFF",
        "#004FFF",
        "#3E00FF",
        "#7200FF",
        "#E500FF",
        "#FF00A7",
        "#FF0046",
        "#020C1D",
        "#404247",
        "#787D85",
        "#AFB3BC",
        "#D4D7DE",
        "#E3E8F1"
      ]
    };
  },
  created() {
    this.all.title = this.$route.query.title || "";
    this.all.store_source = this.$route.query.store_source || "";

    console.log("this.$route.query", this.$route.query);
    if (this.$route.query.id) {
      this.getxq();
      this.setQrCode()
    }

  },
  mounted() {},
  methods: {
    tabCilck: function(val) {
      this.activeName = val;
      if(val=='four'){
        this.getJson()
      }
    },
    getimg: function(img) {
      this.all.qrcode = img;
    },
    gethaibaoImg: function(img) {
      this.haibaoImg = img;
    },
    getimg2: function(img) {
      this.all.order_pic = img;
    },
    xiayibu: function(value) {
      if (!this.$route.query.id && value == "three") {
        this.tabCilck(value);
      } else {
        axios.post(`${this.apis}/api/store/make`, this.all).then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success(
              this.$route.query.id ? "修改成功" : "发布成功"
            );
            console.log("value=>", value);
            if (value) {
              this.tabCilck(value);
            } else {
              this.$router.push({
                path: "/web/zhiboxitong/zhiboxiaoshou"
              });
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      }
    },
    getxq: function() {
      axios
        .get(`${this.apis}/api/store/info?id=${this.$route.query.id}`)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.all = response.data.data;
            this.relo = false;
            this.$nextTick(() => {
              this.relo = true;
            });
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    setQrCode: function() {
     let url = location.origin + "/h5/index.html?id=" + this.$route.query.id;
      this.$nextTick(() => {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    getJson: function() {

      let wenjianjia = "web-store";
      if (process.env.NODE_ENV === "development") {
        // wenjianjia = 'test-web-store'
      }
      if (
        window.location.href.includes("storep.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia = "web-store";
      }
      if (
        window.location.href.includes("store.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia = "test-web-store";
      }
      if (window.location.href.includes("localhost")) {
        wenjianjia = "test-web-store";
      }
      if (this.$route.query.id) {
        axios
          .get(
            `https://file.91haoka.cn/${wenjianjia}/${
              this.$route.query.id
            }.json?v=${Math.random()}`
          )
          .then(response => {
            this.relo2 = false;
            if (response.data) {
              this.list = JSON.parse(response.data);
              console.log("this.list", this.list);
              if (this.list.findIndex(item => item.type == 10) == -1) {
                this.list.push({
                  type: 10,
                  fourValue: {
                    haibaoImg: "",
                    content: "",
                    colorValue: "#FF0808"
                  }
                });
                this.relo2 = true;
              } else {
                this.list.forEach(item => {
                  if (item.type == 10) {
                    this.haibaoImg = item.fourValue.haibaoImg;
                    this.content = item.fourValue.content;
                    this.colorValue = item.fourValue.colorValue || "#FF0808";
                  }
                });
                this.$nextTick(() => {
                  this.relo2 = true;
                });
              }
            }
          })
          .catch(err => {});
      }
    },
    fourClick: function(val) {
      console.log("this.list11111", this.list);

      this.list = this.list.map(item => {
        if (item.type == 10) {
          return {
            ...item,
            fourValue: {
              haibaoImg: this.haibaoImg,
              content: this.content,
              colorValue: this.colorValue
            }
          };
        } else {
          return item;
        }
      });
      console.log("this.list2222", this.list);
      var Obj2str = function(o) {
        if (o == undefined) {
          return "";
        }
        var r = [];
        if (typeof o == "string")
          return (
            '"' +
            o
              .replace(/([\"\\])/g, "\\$1")
              .replace(/(\n)/g, "\\n")
              .replace(/(\r)/g, "\\r")
              .replace(/(\t)/g, "\\t") +
            '"'
          );
        if (typeof o == "object") {
          if (!o.sort) {
            for (var i in o) r.push('"' + i + '":' + Obj2str(o[i]));
            if (
              !!document.all &&
              !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(
                o.toString
              )
            ) {
              r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}";
          } else {
            for (var i = 0; i < o.length; i++) r.push(Obj2str(o[i]));
            r = "[" + r.join() + "]";
          }
          return r;
        }
        return o.toString().replace(/\"\:/g, '":""');
      };

      let wenjianjia = "web-store";
      if (process.env.NODE_ENV === "development") {
        // wenjianjia = 'test-web-store'
      }
      if (
        window.location.href.includes("storep.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia = "web-store";
      }
      if (
        window.location.href.includes("store.91haoka.cn") &&
        this.apis == ""
      ) {
        wenjianjia = "test-web-store";
      }
      if (window.location.href.includes("localhost")) {
        wenjianjia = "test-web-store";
      }

      axios
        .post(`${this.apis}/api/qiniu/token`, {
          bucket: "gthshopstore",
          cloud: `${wenjianjia}/${this.$route.query.id}.json`
        })
        .then(response => {
          console.log("this", this);

          var that = this;
          if (response.data.msg.code == 0) {
            const observer = {
              next(res) {},
              error(err) {},
              complete(res) {
                that.$message.success("保存成功");
                that.$router.push({
                  path: "/web/zhiboxitong/zhiboxiaoshou"
                });
                // that.go('/zhiboxitong/zhiboxiaoshou')
              }
            };
            let files = Obj2str(JSON.stringify(this.list));

            let file = new File(
              [files],
              `${wenjianjia}/${this.$route.query.id}.json`,
              { type: "application/json" }
            );
            const observable = qiniu.upload(
              file,
              file.name,
              response.data.data,
              {},
              {}
            );
            const subscription = observable.subscribe(observer); // 上传开始
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    }
  }
};
</script>

<style scoped lang="less">
/deep/ .el-input__inner {
  border-radius: 12px;
  border: 0;
}
.zhiboxiaoshou_fabu {
  color: #333;
  min-height: 100vh;
  /deep/ .el-breadcrumb {
    font-size: 16px;
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #eee;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #fff;
  }
  * {
    box-sizing: border-box;
  }
  .zhiboxitong_content {
    height: calc(100vh - 70px);
    .left {
      width: 210px;
      background: #3a3e4b;
      height: 100%;
    }
    .right {
      width: calc(100vw - 220px);
      height: 100vh;
      overflow: auto;
      .shoujim {
        width: 300px;
        height: 700px;
        background: white;
        background: url("https://static.91haoka.cn/gantanhao/shouji3.png");
        padding: 50px 20px;
        background-size: 300px 700px;
      }
      .zhiboxitong_right {
        height: calc(100vh - 90px);
        border-radius: 5px;
        padding-left: 25px;
      }
      .fleft {
        width: 420px;
        padding-top: 50px;
        .ft {
          font-size: 18px;
          margin-bottom: 30px;
          font-weight: bold;
        }
        .z {
          width: 120px;
          text-align: right;
          padding-right: 20px;
          font-size: 14px;
        }
        .r {
        }
      }
      .fright {
        width: 300px;
        margin-left: 100px;
        padding-top: 50px;
        .shouji {
          width: 320px;
          height: 700px;
          padding-top: 197px;
          background: url("https://file.91haoka.cn/test-img/1729588515573.png");
         border-radius: 40px;

          background-size: cover !important;
          border: 10px solid #F4F4F4;
          .shouji_img {
            width: 115px;
            height: 115px;
            border: 1px solid #cbcbcb;
            margin: 0 auto;
            border-radius: 5px;
            background: #eaeaea;
            img {
              width: 115px;
              height: 115px;
            }
          }
          .shouji_qita {
            padding: 20px;
            margin-top: 25px;
            margin-left: 20px;
            width: 260px;
            height: 200px;
            background: white;
            border-radius: 10px 10px 0 0;
          }
        }

        .shouji2 {
          width: 300px;
          height: 600px;
          background: url("https://static.91haoka.cn/gantanhao/shouji2.png");
          background-size: 100%;
          padding-top: 342px;
          .shouji_img {
            width: 120px;
            height: 120px;
            border: 1px solid #cbcbcb;
            margin: 0 auto;
            border-radius: 5px;
            background: #eaeaea;
            img {
              width: 120px;
              height: 120px;
            }
          }
        }
      }
    }
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
  }

  .flexb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flexc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .flexbc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .flexcc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}
.tabs_container {
  display: flex;
  margin: 20px 0;
  cursor: pointer;

  .tabs_style {
    width: 160px;
    height: 52px;
    background: rgb(247, 44, 80);
    border: none;
    color: white;
    border-radius: 30px;
  }
}
.background_style {
  height: 100%;
  background: #f8f9fd;
  border-top-left-radius: 30px;
  padding-left: 40px;
}
.note_explain {
  display: flex;
  flex-direction: column;
  margin-left: 120px;
}
.color_select {
  display: flex;
}
.phone_container {
  width: 300px;
  height: 700px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  background: url("https://static.91haoka.cn/gantanhao/shouji3.png");
  background-size: cover !important;
  // background: #f6f6ff;
  // border-radius: 12px;
  .shouji_img {

    width: 100%;
    height: 345px;
    border-radius: 5px;
    background: #f6f6f6;
    img {
      width: 345px;
      border-radius: 10px 10px 0 0;
      height: 345px;
    }
  }
  .shop_detail {
    height: 145px;
    background: white;
    border-radius: 0 0 12px 12px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    .shop_detail_item {
      display: flex;
      flex-wrap: wrap;
      width: 50%;
    }
  }
  .instore_copy {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    .instore {
      width: 45%;
      height: 40px;
      color: #005aff;

      border-radius: 20px;
      background: #e4edff;
      font-size: 15px;
      line-height: 40px;
      text-align: center;
    }
    .copy {
      width: 45%;
      height: 40px;
      background: #005aff;
      color: white;

      border-radius: 20px;
      font-size: 15px;
      line-height: 40px;
      text-align: center;
    }
  }
}
.qrcode_wechat{
  width: 270px;
  height: 350px;
  background: white;
  background-image: url("https://file.91haoka.cn/test-img/1729666457100.png");
  background-size: 100%;
  margin-top: -95px;
  margin-left: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  // align-items: center;
}
</style>
